<template>
  <div class="app-container ad-container">
    <el-form ref="mntForm" :model="formModel" label-width="0">
      <el-form-item label="" prop="list">
        <div class="items ad-items">
          <div v-for="(item, index) in formModel.list" :key="index" class="item">
            <div class="img">
              <hey-image class="max-image" :img-url="item.adUrl" :large-url="item.adUrl" :group="index + ''" />
            </div>
            <p class="img-name ov-line" :title="item.adName">
              {{ item.adName || '无' }}
            </p>
            <p class="text-center play-time">{{ ((index * 2) + '').padStart(2, '0') }}:00-{{ ((index * 2 + 2) + '').padStart(2, '0') }}:00</p>
            <div class="ad-upload">
              <hey-copper
                v-if="hasPermission(['operate'])"
                class="dib"
                :box-width="1200"
                :box-height="800"
                :cut-width="1000"
                :cut-height="704"
                :extra-param="{type: 'deviceAd'}"
                :item="item"
                url-field="adUrl"
                name-field="adName"
                :label="item.adName ? '替换' : '上传'"
                @handleSuccess="handleSuccess"
              />
              <!--<hey-upload :extra-param="{type: 'deviceAd'}" :item="item" url-field="adUrl" name-field="adName" :btn-text="item.adName ? '替换' : '上传'" @handleSuccess="handleSuccess" />-->
              <el-button v-if="hasPermission(['operate'])" v-show="item.adName" plain size="small" @click="remove(item)">删除</el-button>
            </div>
          </div>
        </div>
      </el-form-item>
      <p class="tip">
        请上传尺寸 1024*800、4M以内大小的jpg/jpeg/png图片
      </p>
      <!--<div class="text-center">
        <el-button type="primary" @click="handleSubmit()">保存</el-button>
      </div>-->
    </el-form>
  </div>
</template>

<script>
import ad from './mixins/ad'
export default {
  name: 'Ad0List',
  components: {
  },
  mixins: [ad],
  props: {},
  data() {
    return {
    }
  },
  computed: {},
  created() {

  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.adType = '0'
      this.formModel.list = []
      const { formModel: { list }} = this
      for (let i = 0; i < 12;) {
        const adObj = { ...this.adObj }
        adObj.adType = this.adType
        adObj.playTimePeriod = ++i + ''
        list.push(adObj)
      }
      const adType = this.adType
      const param = {
        adType
      }
      this.get('/deviceAd/selectAdList', param).then(ret => {
        if (ret) {
          ret.forEach(retItem => {
            list.splice(list.findIndex(item => item.playTimePeriod === retItem.playTimePeriod), 1, retItem)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .tip {
    text-align: center;
    color: red;
  }
  .items {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;

    .item {
      &:not(:last-child) {
        margin-right: 20px;
      }
    }
  }

  .av-items.items {
    max-width: 1000px;
    margin: 0 auto;
    .play-time {
      font-weight: 500;
      font-size: 16px;
    }
    .item {
      margin-right: 0;
      margin-bottom: 60px;
      &:not(:nth-of-type(6n)) {
        margin-right: 40px;
      }
    }
  }

  .ad-items {
    max-width: 1200px;
    margin: 0 auto;
    .item {
      .ad-warp {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      &:nth-of-type(4n) {
        margin-bottom: 20px;
      }
    }
  }

  .ad-upload {
    text-align: center;
  }

  .img-name {
    max-width: 100px;
    height: 36px;
    margin: 0 auto;
    text-align: center;
  }

  .img {
    width: 240px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
